<template>
  <Viewer v-if="!noFollowAnyone" :router="viewerRouter"></Viewer>
  <CreatorWall v-else :creators="creatorList" @to-end="creatorNextPage"></CreatorWall>
</template>

<script setup>
import { defineAsyncComponent, watch } from 'vue'
import { useFollow } from '@/compositions/home/follow'
import { useMobileViewerRouter } from '@/compositions/viewer/router/mobileViewerRouter'

const Viewer = defineAsyncComponent(() => import('@/components/viewer/Viewer.vue'))
const CreatorWall = defineAsyncComponent(() => import('@/components/home/mobile/CreatorWall.vue'))

const emits = defineEmits(['change:fpar'])

const viewerRouter = useMobileViewerRouter('mobile-home-follow')
const { fpar } = viewerRouter

watch(
  fpar,
  (v) => {
    emits('change:fpar', v)
  },
  { immediate: true },
)

const { noFollowAnyone, creatorList, init, next: creatorNextPage } = useFollow()
init(viewerRouter)
</script>
